<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户取消订单</title>
    <link rel="stylesheet" href="../css/sign_in.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

    </style>
</head>
<body>
<div id="app">
    <el-link type="primary" href="customer.html" target="_self">用户购买书籍</el-link>
    <el-link type="primary" href="customer2.html" target="_self">用户取消订单</el-link>
    <el-link type="primary" href="sign.html" target="_self">返回登录页面</el-link>

    <br><br>
    <!--  表单数据: 订单信息 -->
    <template>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="id"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="bookId"
                    label="书籍编号">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="购买用户">
            </el-table-column>
            <el-table-column
                    prop="saleNumber"
                    label="购买数量">
            </el-table-column>
            <el-table-column
                    prop="saleTime"
                    label="下单时间">
            </el-table-column>
            <el-table-column
                    prop="salePrice"
                    label="订单金额">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="120px"
                    align="center">
                <el-button type="primary" round @click="dialogVisible = true">退单</el-button>
            </el-table-column>
        </el-table>
    </template>

    <!--退单弹窗-->
    <el-dialog
            title="退货订单"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="订单id">
                <el-input v-model="form.id"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="returnOrder()">我要退单</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
        </span>
    </el-dialog>
</div>

<script src="../js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //var userName = window.sessionStorage.getItem('userName');

    new Vue({
        el: "#app",
        mounted() {
            // var _this = this;
            axios({
                method: "get",
                url: "/showSaleOrder"
            }).then((res) => {
                this.tableData = res.data;
                console.log(this.tableData[0])
            })
        },
        data: {
            //var userName = window.sessionStorage.getItem('userName');
            tableData: [],
            dialogVisible: false,
            form: {
                id:''
            },

        },
        methods: {
            returnOrder() {
                axios.post("/returnOrder", this.form).then(
                    res => {
                        console.log(res)
                        if (res.data.flag == 1) {
                            this.dialogVisible = false;
                        } else {
                        }
                        alert(res.data.msg);
                    }
                )
            }
        }
    })
</script>
</body>
</html>